<template>
  <div class="box" ref="box" style="scroll-snap-type: y mandatory">
    <IccMonitorGroup
      v-for="(item, index) in allMonitor"
      :key="index"
      ref="iccVideoRef"
      class="relative"
      :style="{'scroll-snap-align': index % numInGroup === 0 ? 'start' : 'none'}"

      :player-group-key="playerGroupKey"
      :player-total="6"
      :num-in-group="numInGroup"

      :player-type="'real'"
      :player-id="'around-video-dialog-' + index"
      :use-nginx-proxy="false"
      :proxy-server-ip="'127.0.0.1'"
      :stream-server-ip="'111.20.179.206:19100'"
      :player-obj="item"
      :player-icon-size="35"
      :player-style="{width: '100%',height: '284px'}"
    >
      <template #default>
        <img class="fullscreen" src="dialog-zoom.svg" width="24" height="24"/>
      </template>
    </IccMonitorGroup>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import IccGroupConstant from '../icc-monitor-group/IccGroupConstant.js';
import IccMonitorGroup from '@/components/monitor/monitor-icc-group/icc-monitor-group/IccMonitorGroup.vue';

export default defineComponent({
  name: 'IccMonitorGroupUse',
  components: {IccMonitorGroup},
  data() {
    return {
      allMonitor: [
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
        {
          id: '1000016$1$0$1',
          isOnline: false
        },
      ],
      playerGroupKey: 'around',
      numInGroup: 2,
      scrollPosition: 0,
      scrollStep: 474,
    };
  },
  mounted() {
    this.handleScroll();
  },
  methods: {
    handleScroll() {
      this.$nextTick(() => {
        const videoCard = this.$refs.box;
        videoCard.scrollTo({
          top: this.scrollPosition,
          behavior: 'smooth',
        });

        videoCard.onscrollend = (e) => {
          // 手动移动滚动条后当前组的索引
          const num = e.target.scrollTop / this.scrollStep;
          let groupIndex = Math.round(num);

          // 最后一组不满导致无法手动触发加载问题
          let scrollTop = Math.round(num) * this.scrollStep;
          scrollTop = Math.abs(e.target.scrollTop - scrollTop) <= 5 ? scrollTop : e.target.scrollTop;
          if (groupIndex !== Math.ceil(num) && !Number.isInteger(scrollTop)) {
            // 不是整数则是最后一组
            groupIndex += 1;
          }

          // 手动移动滚动条
          if (IccGroupConstant.playerGroup[this.playerGroupKey].carouselInterval === null) {
            // 滚动条未发生改变则返回
            if (groupIndex === IccGroupConstant.playerGroup[this.playerGroupKey].currentCarouselIndex) {
              return;
            }

            this.$refs.root[0].realPlayGroup(groupIndex, IccGroupConstant.playerGroup[this.playerGroupKey].currentCarouselIndex);
            this.scrollPosition = groupIndex * this.scrollStep;
          }
        };
      });
    },
  },
});
</script>

<style scoped>
.box {
  padding-right: 4px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  overflow-y: auto;
}

.box::-webkit-scrollbar {
  //滚动条整体样式 width: 4px; background-color: transparent;
}

.box::-webkit-scrollbar-thumb {
  //滚动条里面小方块 width: 4px; background: #7D7E7D; border-radius: 2px;
}

.fullscreen {
  background: rgba(43, 52, 61, 0.65);
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
</style>
